<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例与数据绑定</title>
</head>
<body>
    <fieldset>
        <legend>
            Vue实例与数据绑定
        </legend>
        <div id="app">
            <!--在input标签上，有一个 v-model的指令，它的值对应于我们创建的Vue实例的data选项中的msg字段，这就是Vue的数据绑定。-->
            <input type="text" v-model="msg"/>
            <h1>{{name}}</h1>
        </div>
        <div id="app2">
            <h1>{{a}}</h1>
        </div>
    </fieldset>

</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  //通过构造函数Vue就可以创建一个Vue的根实例，返回值app就代表了这个Vue实例。
  var app =  new Vue({
      /**
       * el属性是创建Vue实例必不可少的一个选项，el用于指定页面中已经存在的DOM元素来挂载Vue实例
       * 挂载成功后，可以随时通过app.$el来访问该元素
       */
        el:"#app",
        data:{
            /**
             * 通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。
             * 建议所有会用到的数据都 预先在data内声明，这样不至于将数据散落在业务逻辑中，难以维护。
             */
            msg:"学习Vue实例与数据绑定！",
            name:"孤傲苍狼",
            age:29
        }
    });

  console.log("app.$el的值："+app.$el);
  console.log(app.$el);
  //访问data对象里面的属性
  console.log("app.$data.msg："+app.$data.msg);
  console.log("app.$data.name："+app.$data.name);
  //Vue实例本身也代理了data对象里的所有属性，所以可以这样访问：
  console.log("app.msg："+app.msg);
  console.log("app.name："+app.name);
  console.log("app.age："+app.age);
  /**
   * 除了显式地声明数据外，也可以指向一个己有的变量，并且它们之间默认建立了双向绑定，当修改其中任意一个时，另 一个也会一起变化
   */
  var mydata={
      "a":1
  };

  var app2 = new Vue({
      el:"#app2",
      data:mydata//指向一个己有的变量

  });
  console.log(app2.a);
  //修改属性，原数据也会随之修改
  app2.a=2;
  console.log(mydata.a);
  //反之，修改原数据，Vue属性也会修改
  mydata.a = 3 ;
  console.log(app2.a);
</script>